<template>
  <div class="login_box">
    <!-- 可以使用 CellGroup 作为容器 -->
    <van-cell-group inset class="from">
      <van-field v-model="tel" type="tel" label="手机号" />
      <van-field v-model="password" type="password" label="密码" />
    </van-cell-group>
    <div class="btn">
      <van-button type="primary" @click="logout">退出登录</van-button>
      <van-button type="success" @click="login">登录</van-button>
    </div>

  </div>
</template>

<script>
import { getLogin,getLogout } from "@/request/api/login";
export default {
  data() {
    return {
      tel: '',
      password: '',
    }
  },
  methods:{ 
    async login(){
      const res = await getLogin(this.tel,this.password)
      console.log(res)
      if(res.data.code === 200){
         this.$router.push({path:'/'})
         console.log(res.data.token)
         sessionStorage.setItem('TOKEN',res.data.token)
      }
    },
    async logout(){
      const res = await getLogout()
      console.log(res)
      if(res.data.code === 200){
        alert('成功退出账号')
        this.$router.push({path:'/'})
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login_box {
  width: 100vw;
  height: 100vh;
  background-color: greenyellow;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .btn {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
  }
}
</style>